<template>
  <lay-notice-bar text="以创造性的行为实践于人世。若能以写作为工具，为道途，先帮助自己一程，再以领悟帮助他人一程。这是一种服务。" mode="link"></lay-notice-bar>
  <lay-container fluid>
    <lay-row space="10">
      <draggable item-key="name" v-model="list" class="drag-container" :move="onMove">
        <template #item="{ element }">
          <lay-col md="6" class="drag-item">
            <div class="grid-demo">
              <div class="card-container">
                <lay-card :title="element.username">
                  {{ element.password }}
                </lay-card>
              </div>
            </div>
          </lay-col>
        </template>
      </draggable>
    </lay-row>
  </lay-container>
</template>
<script>
import { ref, onMounted, reactive, toRefs } from 'vue'
import draggable from 'vuedraggable';
import { getArticleList } from '../api/article'

export default {
  components: {
    draggable,
  },
  methods: {
    onMove(obj) {
      return false;
    }
  },
  setup() {
    const state = reactive({
      list: []
    })
    // 调取api获取数据
    const getNewsList = () => {
      const params = {
        page: 1,
        pageSize: 5
      }
      getArticleList(params).then(res => {
        state.list = res.data
      })
    }
    onMounted(getNewsList)
    // ...toRefs()将state里面得对象解构
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style>
.grid-demo {
  line-height: 50px;
  border-radius: 2px;
  text-align: center;
  background-color: #ffffff;
  color: #000000;
}
.card-container {
  background: whitesmoke;
  padding: 10px;
  text-align: left;
}
.drag-container {
  #display: flex;
  justify-content: space-around;
  alignment: center;
}

.drag-item {
  cursor: move; /* 设置拖拽手势 */
  margin: 0px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  padding: 1px;
}

/* 拖拽时显示十字线 */
/*.drag-item:hover {*/
  /*  opacity: 1;*/
    /*  border: 2px solid red;  修改为你想要的颜色 */
/*}*/
</style>